<template>
  <div class="app-container">
    <div class="pd-tb10 pd-l-10">{{ this.importantInfo.projectName }} / {{ getJieDuanName(this.importantInfo.jieDuan) }}
      / {{ this.importantInfo.supplyCompanyName }}
    </div>
    <div class="hor mg-b-10">
      <div class="match-width">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(tab, index) in tabList"
            :key="index"
            :label="tab.nameType1"
            :name="tab.indexName"
          >
            <el-table
              ref="table"
              v-loading="listLoading"
              :data="tab.value"
              element-loading-text="Loading"
              :max-height="autoHeight"
              @row-dblclick="onItemDoubleClick"
              border
              fit
              highlight-current-row
            >
              <el-table-column label="名称" align="center" width="">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="分类" align="center" width="100">
                <template slot-scope="scope">
                  {{ scope.row.fenLeiName }}
                </template>
              </el-table-column>
              <el-table-column label="编号" align="center" width="">
                <template slot-scope="scope">
                  {{ scope.row.classificationCode }}
                </template>
              </el-table-column>
              <el-table-column label="型号" width="100" align="center">
                <template slot-scope="scope">
                  <div class="text-center"
                       :class="{'bg-red':scope.row.modelCodeError==1,'font-color-white':scope.row.modelCodeError==1,'font-black':scope.row.modelCodeError!=1}">
                    {{ scope.row.modelCode }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="工作内容" width="500" align="">
                <template slot-scope="scope">
                  <div class="text-center"
                       :class="{'bg-red':scope.row.neiRongError==1,'font-color-white':scope.row.neiRongError==1,'font-black':scope.row.neiRongError!=1}">
                    {{ scope.row.gongZuoNeiRong }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单位" width="60" align="center">
                <template slot-scope="scope">
                  {{ scope.row.unit }}
                </template>
              </el-table-column>
              <el-table-column label="工程量" width="100" prop="gongChengLiang" align="center">
                <template slot-scope="scope">
                  {{ scope.row.gongChengLiang }}
                </template>
              </el-table-column>
              <el-table-column label="人工费" width="100" prop="renGongCost" align="center">
                <template slot-scope="scope">
                  {{ scope.row.renGongCost }}
                </template>
              </el-table-column>
              <el-table-column label="主材费" width="100" prop="zhuCaiCost" align="center">
                <template slot-scope="scope">
                  {{ scope.row.zhuCaiCost }}
                </template>
              </el-table-column>
              <el-table-column label="辅材及其他材料费" width="100" prop="fuCaiCost" align="center">
                <template slot-scope="scope">
                  {{ scope.row.fuCaiCost }}
                </template>
              </el-table-column>
              <el-table-column label="机械费" width="100" prop="jiXieCost" align="center">
                <template slot-scope="scope">
                  {{ scope.row.jiXieCost }}
                </template>
              </el-table-column>
              <el-table-column label="企业管理费" width="100" prop="qiYeCost" align="center">
                <template slot-scope="scope">
                  {{ scope.row.qiYeCost }}
                </template>
              </el-table-column>
              <el-table-column label="计算税金" width="" prop="shuiJin" align="center">
                <template slot-scope="scope">
                  {{ scope.row.shuiJin }}
                </template>
              </el-table-column>
              <el-table-column label="计算综合单价" width="" prop="comprehensivePrice" align="center">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.comprehensivePrice != null && scope.row.comprehensivePrice !== ''">{{
                      scope.row.comprehensivePrice.toFixed(2)
                    }}</span>
                  <span v-else></span>
                </template>
              </el-table-column>
              <el-table-column label="计算合价" width="" prop="totalPrice" align="center">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.totalPrice != null && scope.row.totalPrice !== ''">{{
                      scope.row.totalPrice.toFixed(2)
                    }}</span>
                  <span v-else></span>
                </template>
              </el-table-column>
              <el-table-column label="原税金" width="" prop="shuiJin" align="center">
                <template slot-scope="scope">
                  <div class="text-center"
                       :class="{'bg-red':scope.row.shuiJin!=scope.row.shuiJinOriginal,'font-color-white':scope.row.shuiJin!=scope.row.shuiJinOriginal,'font-black':scope.row.shuiJin == scope.row.shuiJinOriginal}">
                    {{ scope.row.shuiJinOriginal }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="原综合单价" width="" prop="comprehensivePrice" align="center">
                <template slot-scope="scope">
                  <div class="text-center"
                       :class="{'bg-red':scope.row.comprehensivePriceOriginal!=scope.row.comprehensivePrice,'font-color-white':scope.row.comprehensivePriceOriginal!=scope.row.comprehensivePrice,'font-black':scope.row.comprehensivePriceOriginal == scope.row.comprehensivePrice}">
                    <span
                      v-if="scope.row.comprehensivePriceOriginal != null && scope.row.comprehensivePriceOriginal !== ''">{{
                        scope.row.comprehensivePriceOriginal.toFixed(2)
                      }}</span>
                    <span v-else></span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="原合价" width="" prop="totalPrice" align="center">
                <template slot-scope="scope">
                  <div class="text-center"
                       :class="{'bg-red':scope.row.totalPriceOriginal!=scope.row.totalPrice,'font-color-white':scope.row.totalPriceOriginal!=scope.row.totalPrice,'font-black':scope.row.totalPriceOriginal == scope.row.totalPrice}">
                    <span
                      v-if="scope.row.totalPriceOriginal != null && scope.row.totalPriceOriginal !== ''">{{
                        scope.row.totalPriceOriginal.toFixed(2)
                      }}</span>
                    <span v-else></span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="是否为增补清单内容" width="" prop="shuiJin" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.nameType2 != null">{{"是"}}</div>
                  <div v-else>{{"否"}}</div>
                </template>
              </el-table-column>
              <el-table-column class-name="status-col" label="操作" align="center" width="140">
                <template slot-scope="scope">
                  <div class="hor ver-center" v-if="scope.row.id != null">
                    <el-button type="info" class="" size="mini"
                               @click.stop="onClickView(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" class="pd-lr10" size="mini" :loading="onDeleteLoading"
                               @click.stop="onDeleteId=scope.row.id; onDeleteShow = true ">删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div>
      <el-dialog
        title="编辑供应商内线清单信息"
        :visible.sync="infoDialogShow"
        :close-on-click-modal=false
        width="700px"
        center>
        <div class="ver match-width">
          <div class="ver">
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">分类</div>
              <el-select v-model="tabulationDetails.fenLei" placeholder="请选分类"
                         style="width: 225px" clearable filterable>
                <el-option
                  v-for="item in fenLeiList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">名称</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                        v-model="tabulationDetails.name">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">型号</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                        v-model="tabulationDetails.modelCode">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">单位</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                        v-model="tabulationDetails.unit">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">编号</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                        v-model="tabulationDetails.classificationCode">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">工程量</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="tabulationDetails.gongChengLiang">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">人工费</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="tabulationDetails.renGongCost">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">主材费</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="tabulationDetails.zhuCaiCost">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">辅材及其他材料费</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="tabulationDetails.fuCaiCost">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">机械费</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="tabulationDetails.jiXieCost">
              </el-input>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">企业管理费</div>
              <el-tooltip class="" effect="dark" content="e=(a+b+c+d)*Ⓐ;请填写公式中Ⓐ的值" placement="right-start">
                <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                          v-model="tabulationDetails.qiYeCostFillIn">
                </el-input>
              </el-tooltip>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">税金</div>
              <el-tooltip class="" effect="dark" content="f=(a+b+c+d+e)*Ⓑ;请填写公式中Ⓑ的值" placement="right-start">
                <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                          v-model="tabulationDetails.shuiJinFillIn">
                </el-input>
              </el-tooltip>
            </div>
            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">综合单价</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="tabulationDetails.comprehensivePrice">
              </el-input>
              <div class="mg-lr-20"></div>
              <div style="width: 80px;" class="font14 font-text-color-main-title">合价</div>
              <el-input class="flex1 font-text-color-main-title" style="width: 50px" type="number"
                        v-model="tabulationDetails.totalPrice">
              </el-input>
            </div>

            <div class="hor ver-center mg-t-20">
              <div style="width: 80px;" class="font14 font-text-color-main-title">工作内容</div>
              <el-input class="flex1 font-text-color-main-title" type="textarea" maxlength="512"
                        :autosize="{minRows: 3, }"
                        v-model="tabulationDetails.gongZuoNeiRong" placeholder="请输入"/>
            </div>
            <div class="hor ver-center mg-t-20">
              <div class="hor ver-center flex1">
                <div style="width: 80px;" class="font14 font-text-color-main-title">备注
                </div>
                <el-input class="flex1 font-text-color-main-title" type="textarea" maxlength="512"
                          :autosize="{minRows: 3, }"
                          v-model="tabulationDetails.remarks" placeholder="请输入"/>
              </div>
            </div>
          </div>
          <div class="hor match-width ver-center hor-center mg-t-20">
            <el-button @click="infoDialogShow = false">取 消</el-button>
            <el-button type="primary" slot="reference" :loading="onSaveLoading" class="mg-l-10"
                       @click="onClickSave">保存
            </el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="onDeleteShow"
        :close-on-click-modal=false
        width="30%">
        <span>删除后无法恢复</span>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="onDeleteShow = false">取消</el-button>
                    <el-button type="danger" @click="deleteById"
                               :loading="onDeleteLoading">删除</el-button>
                  </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {getCityData} from "@/js/cityData";

const requestOuterBidBaseTabulation = require('@/api/tabulation/outerBidBaseTabulation')
const requestOuterTabulation = require('@/api/tabulation/outerTabulation')
const requestSupplier = require('@/api/project/supplyCompany')
const request = require('@/api/project/biddingCompany')
export default {

  data() {
    return {
      activeName: 1,
      allList: [],
      tabList: null,
      page: 1,
      size: 20,
      total: 0,
      autoHeight: 600,//根据屏幕高度自动计算的高度
      //筛选参数
      params: {
        flag: 1,
      },
      onDeleteShow: false,
      onDeleteId: "",
      onDeleteLoading: false,
      listLoading: false,
      onSaveLoading: false,
      areaData: [],
      importantInfo: {},

      tabulationDetails: {},
      infoDialogShow: false,
      fenLeiList: [
        {
          value: 1,
          label: '直流屏'
        },
        {
          value: 2,
          label: '高压开关柜'
        },
        {
          value: 3,
          label: '低压开关柜'
        },
        {
          value: 4,
          label: '母线槽'
        },
        {
          value: 5,
          label: '变压器'
        },
        {
          value: 6,
          label: '10kv高压电缆'
        },
        {
          value: 7,
          label: '架空线'
        },
        {
          value: 8,
          label: '低压电缆'
        },
        {
          value: 9,
          label: '预分支电缆'
        },
        {
          value: 10,
          label: '电表箱'
        },
        {
          value: 11,
          label: '配电箱'
        },
        {
          value: 12,
          label: '电表'
        },
        {
          value: 13,
          label: '高压桥架'
        },
        {
          value: 14,
          label: '调试'
        },
        {
          value: 15,
          label: '电缆通道'
        },
        {
          value: 16,
          label: '电杆'
        },
        {
          value: 17,
          label: '手续费'
        },
        {
          value: 18,
          label: '措施费'
        },
        {
          value: 19,
          label: '其他'
        }
      ],
    }
  },
  beforeMount() {
    this.autoHeight = document.body.scrollHeight - 220
    this.importantInfo = JSON.parse(this.$route.query.importantInfo)
  },
  mounted() {
    this.areaData = getCityData()
    this.getAllTabs()
    //去掉第三级的信息
    for (let i = 0; i < this.areaData.length; i++) {
      if (this.areaData[i].children != null && this.areaData[i].children.length > 0) {
        for (let j = 0; j < this.areaData[i].children.length; j++) {
          this.areaData[i].children[j].children = null
        }
      }
    }
  },
  methods: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getJieDuanName(value) {
      switch (value) {
        case 1:
          return "标底";
        case 2:
          return "回标1";
        case 3:
          return "回标2";
        case 4:
          return "回标3";
        case 5:
          return "回标4"
        case 6:
          return "定标"
        case 7:
          return "实施标底"
        case 8:
          return "实施定标"
        default:
          return "";
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getAllTabs() {
      console.log("this.importantInfo", this.importantInfo)
      if (this.importantInfo.type === 1) {
        this.getBidBaseTabList()
      } else if (this.importantInfo.type === 2) {
        this.getOuterTabList()
      }
    },

    getOuterTabList() {
      this.listLoading = true
      const data = new FormData()
      data.append('biddingCompanyId', this.importantInfo.biddingCompanyId)
      data.append('jieDuan', this.importantInfo.jieDuan)

      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestOuterTabulation.getOuterTabList(data).then(response => {
        this.tabList = response.data
        this.total = response.totalElements
        this.listLoading = false
      })
    },
    getBidBaseTabList() {
      this.listLoading = true
      const data = new FormData()
      data.append('projectId', this.importantInfo.projectId)
      data.append('bidType', this.importantInfo.bidType)

      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      requestOuterBidBaseTabulation.getBidBaseTabList(data).then(response => {
        this.tabList = response.data
        this.total = response.totalElements
        this.listLoading = false
      })
    },

    onItemDoubleClick(row) {//单行双击
      this.onClickView(row)
    },
    onClickView(row) {
      this.tabulationDetails = JSON.parse(JSON.stringify(row))
      this.infoDialogShow = true
    },
    onClickSave() {//点击保存
      if (this.tabulationDetails.name == null || this.tabulationDetails.name === "") {
        this.$message({
          message: '名称不能为空',
          type: 'warning',
          duration: 2000
        })
        return
      }
      if (this.importantInfo.type === 1) {
        this.requestBidBaseSave()
      } else if (this.importantInfo.type === 2) {
        this.requestOuterSave()
      }

    },
    requestBidBaseSave() {
      this.onSaveLoading = true
      requestOuterBidBaseTabulation.saveByJson(this.tabulationDetails).then(response => {
        this.onSaveLoading = false
        this.infoDialogShow = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.getBidBaseTabList()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },
    requestOuterSave() {
      this.onSaveLoading = true
      requestOuterTabulation.saveByJson(this.tabulationDetails).then(response => {
        this.onSaveLoading = false
        this.infoDialogShow = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.getOuterTabList()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },
    deleteById() {
      if (this.importantInfo.type === 1) {
        this.deletesByBdqdId()
      } else if (this.importantInfo.type === 2) {
        this.deletesByQdId()
      }
    },
    //删除标底
    deletesByBdqdId() {
      this.$message({
        message: '操作中',
        type: 'warning',
        duration: 1000
      })
      this.onDeleteLoading = true
      const data = new FormData()
      data.append('ids', [this.onDeleteId])
      requestOuterBidBaseTabulation.batchDelete(data).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 3000
        })
        this.onDeleteLoading = false
        this.onDeleteShow = false
        this.getBidBaseTabList()
      }).catch((e) => {
        this.onDeleteLoading = false
      })
    },
    deletesByQdId() {
      this.$message({
        message: '操作中',
        type: 'warning',
        duration: 1000
      })
      this.onDeleteLoading = true
      const data = new FormData()
      data.append('ids', [this.onDeleteId])
      requestOuterTabulation.batchDelete(data).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 3000
        })
        this.onDeleteLoading = false
        this.onDeleteShow = false
        this.getOuterTabList()
      }).catch((e) => {
        this.onDeleteLoading = false
      })
    }
  }
}
</script>

<style scoped>
.cus-table {
  border-collapse: collapse;
  text-align: center;
}

.cus-table td, .cus-table th {
  border: 1px solid #cad9ea;
  color: #424242;
  height: 50px;
}

.cus-table th {
  background-color: #EFEFEF;
  width: 100px;
  color: #414141;
  font-size: 14px;
}
</style>
